<template>
  <div class="bridge-system">
    <h1>桥梁系统</h1>
    <div class="card-container">
      <t-card class="system-card" :hover-shadow="true" @click="goToDeviceList">
        <template #cover>
          <div class="card-icon">
            <t-icon name="dashboard" size="48px" />
          </div>
        </template>
        <template #title>
          设备列表
        </template>
        <template #description>
          查看和管理桥梁系统设备
        </template>
      </t-card>
      
      <t-card class="system-card" :hover-shadow="true" @click="goToAlarmRecords">
        <template #cover>
          <div class="card-icon">
            <t-icon name="error-circle" size="48px" />
          </div>
        </template>
        <template #title>
          报警记录
        </template>
        <template #description>
          查看桥梁系统报警历史记录
        </template>
      </t-card>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { DashboardIcon, ErrorCircleIcon } from 'tdesign-icons-vue-next';

const router = useRouter();

const goToDeviceList = () => {
  router.push('/bridge/devices');
};

const goToAlarmRecords = () => {
  router.push('/bridge/alarms');
};
</script>

<style scoped>
.bridge-system {
  padding: 20px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.system-card {
  width: 300px;
  cursor: pointer;
  transition: all 0.3s;
}

.system-card:hover {
  transform: translateY(-5px);
}

.card-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background-color: #f5f5f5;
}
</style> 